<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          placeholder="借款客户"
          @keyup.enter.native="getData()"
          @clear="getData()"
          clearable
          v-model="params.customer_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="客户类型"
          clearable
          number-key
          :options="enumCustomerType"
          v-model="params['org_class.eq']"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <select-date-cascader
          placeholder="放款时间"
          class="form-control-ml"
          v-model="pickDateLoad"
          @select="handleDateLoadChange"
        ></select-date-cascader>
      </el-form-item>
      <el-form-item>
        <select-date-cascader
          placeholder="到期时间"
          class="form-control-ml"
          v-model="pickDateLoadEnd"
          @select="handleDateLoadEndChange"
        ></select-date-cascader>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel('乡村振兴-存量')"
        >
          导出
        </el-button>
      </el-form-item>

      <el-form-item class="float-right">
        <el-button class="btn-long" type="primary" @click="projectRemove">项目解保</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <project-view-dialog
      :visible.sync="viewVisible"
      :batch-no="attachNo"
      :query-id="queryId"
    ></project-view-dialog>

    <loan-un-view-dialog
      :visible.sync="unVisible"
      :related-data="relatedData"
    ></loan-un-view-dialog>
    <remove-dialog :visible.sync="removeVisible" :is-end="true"></remove-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  enumloanStatusStyle,
  enumCustomerType,
  dataAdapter,
  parseCascaderDate,
  enumLoanbehStatus,
} from '@/bank/views/limit/index'

import hndTableMixin from '@/bank/views/business/limit/history/mixins'

import ProjectViewDialog from '@/bank/views/business/industry/history/ProjectViewDialog'
import SelectDateCascader from '@/components/select/SelectDateCascader'
import LoanUnViewDialog from '@/bank/views/business/limit/history/postloan/components/LoanUnViewDialog'
import RemoveDialog from '@/bank/views/business/industry/history/postloan/components/RemoveDialog'
export default {
  components: {
    ProjectViewDialog,
    SelectDateCascader,
    LoanUnViewDialog,
    RemoveDialog,
  },
  mixins: [hndTableMixin],
  props: {},
  data() {
    return {
      unVisible: false,
      relatedData: {},
      enumCustomerType,
      loading: false,
      params: {
        index: 1,
        size: 10,
        'load_beh_status.eq': 1,
        'review_approval.gte': 4,
        'is_replace.neq': 1,
        customer_name: '',
        'channel_type.eq': 0,
        'is_rural_dev.eq': 1,
      },
      order: {
        load_date: 'desc',
      },
      tableName: 'datum_one_county_industry',
      tableColumns: [
        { attrs: { label: '项目ID', prop: 'customer_related_id', align: 'center' } },
        {
          attrs: { label: '借款客户', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '客户类型', prop: 'org_class_name', align: 'center' } },
        { attrs: { label: '贷款金额(万元)', prop: 'warranty_amount', align: 'center' } },
        { attrs: { label: '在保余额(万元)', prop: 'left_funds', align: 'center' } },
        { attrs: { label: '放款日期', prop: 'loadDate', align: 'center', minWidth: '100px' } },
        { attrs: { label: '到期日期', prop: 'loadEndDate', align: 'center', minWidth: '100px' } },
        { attrs: { label: '银行名称', prop: 'bank_name', align: 'center', minWidth: '100px' } },
        {
          attrs: { label: '项目状态', prop: 'postloanStatus', align: 'center' },
          process: (_, row) => ({ attrs: { class: `text-${row.postloanStatusStyle}` } }),
        },
        { attrs: { label: '解保日期', prop: 'unGuaDate', align: 'center', minWidth: '100px' } },
        {
          attrs: { label: '操作', align: 'center', width: '200px' },
          operations: [
            { name: '查看', event: this.handleView },
            {
              name: '解保信息',
              event: this.handleUnView,
              ifRender: row => [4, 5, 6].includes(+row.load_beh_status),
            },
          ],
        },
      ],
      pickDateLoad: [],
      pickDateLoadEnd: [],

      tableData: [],
      tableCount: 0,

      // 附件上传
      attachVisible: false,
      attachProjectData: {},

      viewVisible: false,
      attachNo: '',
      queryId: '',
      removeVisible: false,
    }
  },
  computed: {
    ...mapGetters(['clientId', 'userId']),
    isSubmit() {
      return this.user.scopes.includes('indoneBI')
    },
    nowDate() {
      return this.$utils.dateFormat(new Date(), 'yyyy-MM-dd')
    },
  },
  watch: {},
  created() {
    this.params['load_end_date.lt'] = this.nowDate
    this.getData()
  },
  mounted() {},
  methods: {
    projectRemove() {
      this.removeVisible = true
    },
    handleUnView(row) {
      this.unVisible = true
      this.relatedData = { ...row }
    },
    // getParams() {
    //   return this.isSubmit
    //     ? {
    //         ...this.normalParams,
    //         ...this.params,
    //       }
    //     : {
    //         'submit_person.eq': this.userId,
    //         ...this.params,
    //       }
    // },
    handleDateLoadEndChange(val = []) {
      const [start, end] = parseCascaderDate(val)
      this.params['load_end_date.gte'] = start
      this.params['load_end_date.lte'] = end
      this.getData()
    },
    handleDateLoadChange(val = []) {
      const [start, end] = parseCascaderDate(val)
      this.params['load_date.gte'] = start
      this.params['load_date.lte'] = end
      this.getData()
    },
    handleSuccess() {
      this.$emit('success', true)
      this.getData()
    },
    // getData(index = 1) {
    //   this.params.index = index
    //   this.loading = true
    //   this.$api
    //     .getData(this.$serviceName, this.tableName, this.getParams(), this.order)
    //     .then(res => {
    //       const data = (res && res.data) || {}
    //       this.tableData = (data.data || []).map(this.dataAdapter)
    //       this.tableCount = data.totalCount || 0
    //     })
    //     .finally(() => {
    //       this.loading = false
    //     })
    // },

    dataAdapter(item) {
      item = dataAdapter(item)
      item.unGuaDate = this.$utils.dateFormat(item.un_gua_date, 'yyyy-MM-dd') || '-'

      item.postloanStatus = enumLoanbehStatus[item.load_beh_status] || ''
      item.postloanStatusStyle = enumloanStatusStyle[item.load_beh_status] || ''

      return item
    },

    handleView(row = {}) {
      this.queryId = row.customer_related_id
      this.attachNo = row.un_gua_batch_id || ''
      this.viewVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
